<template>
	<view>
		<canvas style="width: 750rpx; height:1000rpx"
		 canvas-id="firstCanvas1" 
		 id="firstCanvas1"
		 @touchstart="handleTouchStart"
		  @touchmove="handleTouchMove"
		   @touchend="handleTouchEnd"
		 ></canvas>
	</view>
</template>

<script>
	let context1= null;
	export default {
		name:"llt_signature",
	
		data() {
			return {
				canvasData:[]
			};
		},
		watch: {
			canvasData() {
				if(!this.canvasData.length){
					return
				}
				context1.moveTo(this.canvasData[0].x, this.canvasData[0].y)
			
				for (let i = 0; i < this.canvasData.length; i++) {
					context1.lineTo(this.canvasData[i].x, this.canvasData[i].y)
				}
				
				context1.stroke()
				context1.draw(true,()=>{
					this.saveToImg('firstCanvas1')
					
				})
			}
		},
		created() {
			context1= uni.createCanvasContext('firstCanvas1',this)
			context1.setLineWidth(1)
			context1.setStrokeStyle("#000000")
		},
		methods:{
			saveToImg: function (mycanvasId) {
			   //  uni.canvasToTempFilePath({
			   //    canvasId: mycanvasId,
			   //    success:(res)=> {
			   //      // wx.saveImageToPhotosAlbum({
			   //      //   imagePath: res.tempFilePath,
			   //      // })
			   //      var tempFilePath=res.tempFilePath;
			   //      console.log("3.输出画布成功！！！tempFilePath:::", tempFilePath);
			   //      // that.data.imagePath = that.data.imagePath.concat(tempFilePath); 
					 // this.$emit('canvasDataChange',tempFilePath)
			   //      // console.log("3.输出画布成功！！！that.data.imagePath:::", that.data.imagePath);
			   //    },
			   //    fail(res) {
			   //      console.log("3.输出画布失败！！！：：", res);
			   //    }
			   //  }, this)
			  },
			handleTouchStart(e) {
			this.canvasData=[]
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
			},
			handleTouchMove(e) {
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
			},
			handleTouchEnd(e) {
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
				
				
				
			},
			
		}
	}
</script>

<style lang="scss">

</style>
